<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#myCan {
				display: block;
				margin: 0 auto;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="400" height="400"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.translate(200, 200);
			ctx.rotate(-180*Math.PI/180);

			setInterval(function() {
				draw()
			}, 1000);

			draw();

			function draw() {
				ctx.clearRect(-200, -200, 400, 400);
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.strokeStyle = '#00BFFF';
				ctx.arc(0, 0, 170, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.restore();

				var date = new Date();
				var H = date.getHours();
				var M = date.getMinutes();
				var S = date.getSeconds();
				console.log(H, M, S);

				var angelH, angelM, angelS;
				angelH =(H + M / 60 + S / 3600) * 30 * Math.PI / 180;
				angelM = (M + S / 60) * 6 * Math.PI / 180;
				angelS = S * 6 * Math.PI / 180;

				for (var i = 0; i < 60; i++) {
					if (i % 5 == 0) {
						ctx.beginPath();
						ctx.fillRect(-5, -150, 10, 20);
					} else {
						ctx.beginPath();
						ctx.fillRect(0, -150, 5, 5);
					}
					ctx.rotate(6 * Math.PI / 180);
				};

				ctx.save();
				ctx.beginPath();
				ctx.rotate(angelH);
				ctx.fillRect(0, -5, 5, 50);
				ctx.closePath();
				ctx.restore();

				ctx.save();
				ctx.beginPath();
				ctx.rotate(angelM);
				ctx.fillStyle = 'skyblue'
				ctx.fillRect(1, -6, 3, 80);
				ctx.closePath();
				ctx.restore();

				ctx.save();
				ctx.beginPath();
				ctx.rotate(angelS);
				ctx.fillStyle = 'red'
				ctx.fillRect(2, -8, 1, 100);
				ctx.closePath();
				ctx.restore();

				// ctx.save();
				// ctx.beginPath();
				// ctx.fillStyle = 'black'
				// ctx.arc(3.5,2,7,0,2*Math.PI);
				// ctx.fill();
				// ctx.closePath();
				// ctx.restore();



			}
		</script>
	</body>
</html>
